<template>
  <div class="warp-box">
    <el-row class="search-box" :gutter="10">
      <el-col :span="20">
        <el-input
          style="width:340px"
          v-model="parames.customerName"
          size="small"
          clearable
          placeholder="搜索公司名称"
        ></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="text" icon="el-icon-s-open" @click="handleSearch">高级搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="main-box channel1234" style="margin:10px -5px;">
      <!-- <el-col :span="24">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">快速记账</el-button>
      </el-col> -->
      <el-col :span="24">
        <el-table
          v-loading="loading"
          :data="dataList"
          border
          @row-click="handleRow"
          :row-class-name="tableRowClassName"
          style="margin-top:14px;"
        >
          <!-- <el-table-column prop="id" label="选择" width="55" fixed="left">
            <template slot-scope="scope">
              <el-radio v-model="radio" :disabled="scope.row.taskStatus == '已完成'" :label="scope.row.contractProductId" @change="handleSelect(scope.row)">&nbsp;</el-radio>
            </template>
          </el-table-column> -->
          <el-table-column
            show-overflow-tooltip
            width="300"
            fixed="left"
            prop="customerName"
            label="公司名称"
          ></el-table-column>
          <el-table-column width="200" prop="contacts" label="联系人"></el-table-column>
          <el-table-column prop="contactDetails" width="200" label="联系方式"></el-table-column>
          <el-table-column width="200" prop="currentBookKeepingMonth" label="当前报税期"></el-table-column>
          <el-table-column width="200" prop="startMonth"  label="开始月份"></el-table-column>
          <el-table-column width="200" prop="endMonth"  label="截止月"></el-table-column>
          <el-table-column width="200" prop="serviceProgress"  label="服务进展"></el-table-column>
          <el-table-column width="200" prop="unitPrice" label="服务单价"></el-table-column>
          <el-table-column width="100" prop="serviceAmount" label="服务金额"></el-table-column>
          <el-table-column width="100" prop="receiptedAmount" label="实收"></el-table-column>
          <!-- <el-table-column width="100" prop="expenditureAmount" label="支出"></el-table-column>
          <el-table-column prop="taskStatus" width="100" label="状态"> -->
            <!-- <template slot-scope="scope">
              <div v-if="scope.row.taskStatus">{{scope.row.taskStatus}}</div>
            </template> -->
          <!-- </el-table-column> -->
          <!-- <el-table-column width="80" align="center" lable=""  fixed="right">
            <template slot-scope="scope">
                <div style="text-align: center">
                  <el-button size="mini" @click="handleRow(scope.row)" type="text" icon="el-icon-search"></el-button>
                </div>
            </template>
          </el-table-column> -->
        </el-table>
      </el-col>
      <el-col :span="24">
        <pages :parames="parames" @render="checkPage"></pages>
      </el-col>
    </el-row>
    <createdDialog :dialogData="dialogData" @checkRender="checkRender"></createdDialog>
    <searchDialog :searchData="searchData" @checkSearch="checkSearch" @resetSearch="resetSearch"></searchDialog>
    <!-- <detailDialog :detailData="detailData" @checkRender="checkRender"></detailDialog> -->
  </div>
</template>

<script>
import createdDialog from "./addAllDialog.vue"; //新建收款记录
import searchDialog from "./allSearchDialog.vue"; //高级搜索弹窗
import detailDialog from "./allDetail.vue"; //详情弹窗

export default {
  data() {
    return {
      radio: '',
      loading: false,
      parames: {
        page: 1, //页码index
        limit: 10, //页码最大
        customerName: '', //联系人名称
        totalCount: 0,
        search: []
      },
      dialogData: {
        //新建弹窗
        time: '',
        ie: '',
        show: false
      },
      searchData: {
        //搜索弹窗
        show: false
      },
      detailData: {
        //详情弹窗
        show: false
      },
      total: 100,
      pagelimit: 10,
      pageindex: 1,
      dataList: [],
      multipleSelection: []
    };
  },
  components: {
    createdDialog,
    searchDialog,
    detailDialog
  },
  methods: {
    search() {
      //查询
      this.parames.page = 1;
      let searchDate = this.parames.search
      let n = 0
      this.parames.search.forEach(el=>{
        if (el.key == 'customerName') {
          n = 1
        }
      })
      if (this.parames.customerName && n == 0) {
        this.parames.search.push({
          key: 'customerName',
          value: this.parames.customerName
        })
      } else if (this.parames.customerName && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'customerName') {
            el.value = this.parames.customerName
          }
        })
      } else if (!this.parames.customerName && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'customerName') {
            this.parames.search.splice(index,1)
          }
        })
      }
      this.getList()
    },
    handleSearch() {
      //打开高级搜索弹窗
      this.searchData.customerName = this.parames.customerName
      this.searchData.show = true;
    },
    resetSearch () {
      this.parames.customerName = ''
    },
    checkSearch (value) {
      this.parames.search = value
      value.forEach(el=>{
        if(el.key == 'customerName') {
          this.parames.customerName = el.value
        }
      })
      this.parames.page = 1
      this.getList()
    },
    handleSelect(row) { //选择
      this.multipleSelection = []
      this.multipleSelection.push(row)
    },
    checkRender () { 
      this.getData()
    },
    checkPage () {
      this.getList()
    },
    handleAdd() { //新建
      if (this.multipleSelection.length == 0) {
        this.$message('请至少选择一个任务')
        return false
      }
      this.dialogData.id = this.multipleSelection[0].contractProductId
      this.dialogData.time = this.multipleSelection[0].currentBookKeepingMonth
      this.dialogData.type = 'new'
      this.dialogData.show = true;
    },
    getData () {
      this.$post(this.$api.posTaskBookkeepingList,this.parames).then(response => {
        if (response.data.succeed) {
          this.parames.totalCount = response.data.totalCount
          this.dataList = response.data.data
        }
        setTimeout(() => {
          this.loading = false
        }, 200);
      })
    },
    getList () { //获取页面数据
      this.radio = ''
      this.multipleSelection = []
      this.loading = true
      this.getData()
    },
    handleRow(row) {
      //点击某一行数据打开详情
      this.detailData.id = row.contractProductId;
      this.detailData.data = row
      this.detailData.show = true;
    },
    tableRowClassName({ row, rowIndex }) {
      //斑马表格
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    }
  },
  mounted() {
    this.getList()
  }
};
</script>

<style>
.el-table .warning-row {
  background: #f9f9f9;
}
.el-table .success-row {
  background: #fff;
}
</style>